<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Klokan Technologies GmbH (https://www.klokantech.com/)">
    <meta name="keywords" content="{% block keywords %}epsg, coordinate system, srs, crs, projection{% endblock %}">
    <meta name="description" content="{% block description %}EPSG.io: Coordinate systems worldwide (EPSG/ESRI), preview location on a map, get transformation, WKT, OGC GML, Proj.4. http://EPSG.io/ made by @klokantech{% endblock %}" />

    <meta property="og:image" content="{% block image %}{{ url_for('static', filename='/static/img/logo.png') }}{% endblock %}">
    <meta property="og:title" content="{% if self.htmltitle() %}{{ self.htmltitle() }}{% else %}{{ self.title() }}{% endif %}">
    <meta property="og:description" content="{{ self.description() }}">
    <meta property="og:url" content="http://epsg.io">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@epsg.io">
    <meta name="twitter:creator" content="@klokantech">
    <meta name="twitter:title" content="{% if self.htmltitle() %}{{ self.htmltitle() }}{% else %}{{ self.title() }}{% endif %}">
    <meta name="twitter:description" content="{{ self.description() }}">
    <meta name="twitter:image:src" content="{{ self.image() }}">

    <meta name="theme-color" content="#ffffff">
    <meta name="robots" content="index, follow">

    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" />
    <link rel="search" href="{{ url_for('static', filename='opensearch.xml') }}" title="EPSG.io" type="application/opensearchdescription+xml"/>

    <link href="{{ url_for('static', filename='css/base.min.css') }}" rel="stylesheet" />
    <script src="{{ url_for('static', filename='js/clipboard.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/index.js') }}"></script>

    <title>{% if self.htmltitle() %}{% block htmltitle %}{% endblock %}{% else %}{% block title %}{% endblock %}{% endif %}</title>
    {% block head %}{% endblock %}
  </head>
  {% block body %}<body>{% endblock %}
    {% set messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <ul class="flashes">
      {% for category, message in messages %}
      <li class="message {{ category }}">{{ message | safe }}</li>
      {% endfor %}
    </ul>
    {% endif %}

 {% block navbar %}

    <div id="navbar-top" class="nav-background">

      <a class="logo" href="/"><img class="padt-2 marx-4 marr-0" src="/static/img/espg-logo.png" alt="EPSG logo"><p class="inline">powered by MapTiler</p></a>
        <div class="nav marx-4">
          <a href="/?q=">Search</a>
          <a href="/map" title="">Map</a>
          <a href="/transform" title="">Transform</a>
          <a href="/about" title="">About</a>
        </div>
        <div class="nav-mobile">
          <div id="nav-mobile-btn">L</div>
          <div id="nav-mobile-nav">
            <a href="/?q=">Search</a>
            <a href="/map" title="">Map</a>
            <a href="/transform" title="">Transform</a>
            <a href="/about" title="">About</a>
          </div>
        </div>
    </div>
    <div class="row padb-8"></div>
    {% endblock %}

    {% block content %}
    {% endblock %}
    <div class="container center">
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- EPSG.io -->
      <ins class="adsbygoogle"
           style="display:inline-block;width:728px;height:90px"
           data-ad-client="ca-pub-0328423815528922"
           data-ad-slot="6564733120"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
    {% block footer_type %}
    <div id="footer">
      {% endblock %}
          <div class="row center-mobile">
            <div class="container bordertop-gray-light">
              <div class="col2 padt-2">
                <a href="https://www.maptiler.com/" title=""><img class="footer-logo" src="/static/img/maptiler-logo.png" alt="" /></a>
              </div>
                <div class="col8 pad-mobile">
                <p class="mar-mobile">Find a coordinate system and get position on a map. Powered by EPSG database {{ version }}</p>

              </div>
              <div class="col2 pad-mobile">
                <p id="copyright">Copyright &copy; 2019</p>
              </div>
            </div>
          </div>
        </div>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','__gaTracker');

      __gaTracker('create', 'UA-47718358-1', 'epsg.io');
      __gaTracker('send', 'pageview');

      /* XXX: Navbar-top */
      var navMobileBtn = document.querySelector('#nav-mobile-btn');
      if (navMobileBtn) {
        navMobileBtn.onclick = function() {
          var navMobileNav = document.getElementById('nav-mobile-nav');
          var navMobileBtn = document.getElementById('nav-mobile-btn');
          if (navMobileNav.className === 'active') {
            navMobileNav.className = '';
            navMobileBtn.className = '';
          } else {
            navMobileNav.className = 'active';
            navMobileBtn.className = 'active';
          }
        };
      }
    </script>

  </body>
</html>
